
<div style="POSITION: relative" id="content">
  <h3>easyUI自定义DataGrid分页栏</h3>
  <div id="article_content" class="article_content">
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid内置一个很好特性的分页功能,自定义也相当简单,在这个教程中,我们将创建一个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid
      和添加一些自定义按钮在分页工具栏.</span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344588877_4667.png" alt=""><br>
      </span></span></p>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 创建 DataGrid</h4>
    <pre name="code" class="html">&lt;table id=&quot;tt&quot; title=&quot;Load Data&quot; class=&quot;easyui-datagrid&quot; style=&quot;width:550px;height:250px&quot;  
        url=&quot;data/datagrid_data.json&quot;  
        iconCls=&quot;icon-save&quot; pagination=&quot;true&quot;&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;itemid&quot; width=&quot;80&quot;&gt;Item ID&lt;/th&gt;  
            &lt;th field=&quot;productid&quot; width=&quot;80&quot;&gt;Product ID&lt;/th&gt;  
            &lt;th field=&quot;listprice&quot; width=&quot;80&quot; align=&quot;right&quot;&gt;List Price&lt;/th&gt;  
            &lt;th field=&quot;unitcost&quot; width=&quot;80&quot; align=&quot;right&quot;&gt;Unit Cost&lt;/th&gt;  
            &lt;th field=&quot;attr1&quot; width=&quot;100&quot;&gt;Attribute&lt;/th&gt;  
            &lt;th field=&quot;status&quot; width=&quot;60&quot; align=&quot;center&quot;&gt;Stauts&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt;  </pre>
    切记设置<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">pagination属性为true才会生成工具栏.</span>
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 自定义工具栏</h4>
    <pre name="code" class="javascript">var pager = $('#tt').datagrid('getPager');    // 得到datagrid的pager对象
pager.pagination({  
    showPageList:false,  
    buttons:[{  
        iconCls:'icon-search',  
        handler:function(){  
            alert('search');  
        }  
    },{  
        iconCls:'icon-add',  
        handler:function(){  
            alert('add');  
        }  
    },{  
        iconCls:'icon-edit',  
        handler:function(){  
            alert('edit');  
        }  
    }],  
    onBeforeRefresh:function(){  
        alert('before refresh');  
        return true;  
    }  
});  </pre>
    正如你所看到的上面的,我们首先得到datagrid的<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">pager 对象,然后重新创建<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">pagination,我们隐藏pageList和添加三个新的按钮.</span></span>
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/datagrid/downloads/easyui-datagrid11-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-datagrid-demo.zip</a></div>
    <br>
    <br>
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><br>
      <br>
      </span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><br>
      </span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><br>
      </span></p>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>